<template>
  <!-- :class="show ? 'show' : ''" @tap="hideModal" -->
  <wd-popup class="cu-modal" customStyle="width: '90vw'" v-model="state.showDia">
    <view class="cu-dialog bg-white" @tap.stop="">
      <view class="cu-bar flex items-center">
        <view class="action" @tap="hideModal">取消</view>
        <text class="action" style="margin-right: 30rpx; font-size: 30rpx" @tap="makeSure">
          确定
        </text>
      </view>
      <view class="checked">
        当前选择：
        <scroll-view :scroll-left="state.scrollLeft" scroll-with-animation scroll-x>
          <text
            v-for="(item, index) in checked"
            :key="index"
            class="text-blue"
            @click="cancelThis(index)"
          >
            {{ item.invName }}
            <text class="cuIcon-roundclose text-gray"></text>
          </text>
        </scroll-view>
      </view>
      <swiper class="swiper">
        <swiper-item>
          <input
            class="search"
            v-model="state.invName"
            @input="onSearchInput"
            placeholder="根据关键词查询"
          />
          <view class="search-results" v-if="state.vagueResults.length">
            <view
              v-for="(item, index) in state.vagueResults"
              :key="index"
              class="row"
              :class="ids.includes(item.invCode) ? 'text-blue' : ''"
              @click="checkThis(item)"
            >
              <span class="invCode">{{ item.invCode }}</span>
              <span class="invName">{{ item.invName }}</span>
              <span class="invStd">{{ item.invStd }}</span>
            </view>
          </view>
          <view v-else class="no-task">
            <image src="../static/noman.png"></image>
            <view>没有数据</view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </wd-popup>
</template>

<script lang="ts" setup name="leaguerPicker">
import { searchbaseInv } from '@/service/pm-requirement';
import { strLen } from '../utils/util';

const emit = defineEmits(['hideModal', 'checkLeaguer']);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },

  checked: {
    type: Array,
    default: () => [],
  },
});
const state = reactive({
  loaded: false,
  style: {
    left: '',
    width: '',
  },
  sroSty: {
    width: '',
  },
  depts: [],
  tabs: ['请选择'],
  posInd: 0,
  options: [],
  sroLeft: 0,
  vagueResults: [],
  cache: null,
  scrollLeft: 100,
  showDia: false,
  arr: [],
  _w: 0,
  invName: null,
});
const ids = computed(() => {
  return props.checked.map((el: any) => {
    return el.invCode;
  });
});
watch(
  () => props.checked,
  (val) => {
    state.cache = state.cache || JSON.parse(JSON.stringify(val));
  },
  { immediate: true, deep: true },
);
watch(
  () => props.show,
  (val) => {
    state.showDia = val;
    if (val) {
      onSearchInput();
    }
  },
  { immediate: true, deep: true },
);
onMounted(() => {});
const onSearchInput = (e?) => {
  state.invName = e ? e.detail.value : '';
  const data = { invName: state.invName, size: 1000 };
  searchbaseInv(data)
    .then((res) => {
      state.vagueResults = res.data.records;
    })
    .catch((err) => {});
};
const hideModal = () => {
  // emit('checkLeaguer', state.cache);
  state.cache = null;
  emit('hideModal');
  state.showDia = false;
};
const makeSure = () => {
  if (props.checked.length == 0) {
    uni.showToast({
      mask: true,
      icon: 'none',
      title: '请选择客户',
    });
    return;
  }
  emit('checkLeaguer', props.checked);
  state.cache = null;
  hideModal();
};
const cancelThis = (index) => {
  props.checked.splice(index, 1);
};

const checkThis = (option) => {
  const i = ids.value.indexOf(option.invCode);
  if (i !== -1) {
    props.checked.splice(i, 1);
    state.invName = '';
  } else {
    const { invCode, invName, invStd } = option;
    const item = { invCode, invName, invStd };
    // props.checked.push({ ...item });
    props.checked.length = 0;
    props.checked.push({ ...item });
    state.invName = '';
    state.scrollLeft = 1000;
  }
};
</script>

<style scoped lang="scss">
.cu-bar {
  // padding: 10rpx 20rpx;
  position: relative;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  border-bottom: 1rpx solid #f1f1f1;
}

.cu-bar .action {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  min-height: 50px;
  margin-right: 0;
  font-size: 30rpx;
}

.checked {
  display: flex;
  width: 100%;
  padding: 0 30rpx;
  font-size: 28rpx;
  line-height: 80rpx;
  text-align: left;
}

.checked scroll-view {
  flex: 1;
  max-width: 480rpx;
  white-space: nowrap;
}

.checked text {
  margin-right: 20rpx;
}

.swiper {
  height: calc(100% - 182rpx);
}

.search {
  height: 80rpx;
  padding: 0 15rpx;
  margin: 0 30rpx;
  font-size: 28rpx;
  text-align: left;
  border: 1rpx solid #f1f1f1;
  border-radius: 10rpx;
}

.content {
  padding: 0 30rpx;
  font-size: 32rpx;
}

.tabs-wrap {
  width: 100%;
}

.tabs {
  position: relative;
  height: 90rpx;
  line-height: 90rpx;
  text-align: left;
}

.tabs .item {
  display: inline-block;
  font-weight: 100;
}

.text-grey,
.line-grey,
.lines-grey {
  color: #8799a3;
}

.icon {
  display: inline-block;
  width: 2em;
  text-align: center;
}

.tabs .son {
  position: absolute;
  bottom: 0;
  height: 8rpx;
  transition: all 0.6s;
}

.bg-gradual-blue {
  color: #fff;
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
}
/* 	.indicate{
		height: 8rpx;
		position: relative;
	}
	.indicate .son{
		height:8rpx;
		position: absolute;
		transition: all .6s;
	} */
.options {
  height: 600rpx;
  padding: 30rpx 0;
  overflow-y: scroll;
  text-align: left;
  transition: all 0.3s;
}

.option {
  display: flex;
  justify-content: space-between;
  font-weight: 100;
  line-height: 80rpx;
  border-top: 1rpx solid #f8f8f8;
}

.options .option:first-child {
  border-top: none;
}

.cu-dialog {
  width: 90vw;
  height: 80vh;
  max-height: 880rpx;
  padding: 10rpx 0;
  font-size: 26rpx;
}

.no-task {
  height: calc(100% - 110rpx);
  font-size: 24rpx;
  color: #8a8a8a;
  text-align: center;
  letter-spacing: 2rpx;
}

.no-task image {
  width: 100rpx;
  height: 100rpx;
  margin-top: 100rpx;
}

.search-results {
  height: calc(100% - 110rpx);
  padding: 0 35rpx;
  margin-top: 30rpx;
  overflow-y: scroll;
}

.search-results .row {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 0;

  // line-height: 80rpx;
  text-align: left;
  border-top: 1rpx solid #f1f1f1;
}

.search-results .row:first-child {
  border-top: none;
}

.search-results .row .tenantName {
  // width: 50%;
  width: 100%;
}

.search-results .row .invName {
  // flex: 1;
  width: 33%;
}

.search-results .row .invCode {
  // flex: 1;
  width: 33%;
}

.search-results .row .invStd {
  // flex: 1;
  width: 33%;
}
</style>
